<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <!-- 引入react核心库 -->
  <script src="../newJs/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作DOM -->
  <script src="../newJs/react-dom.development.js"></script>
  <!-- 引入babel,用于将jsx转换为js -->
  <script src="../newJs/babel.min.js"></script>

  <body>
    <!-- 容器 -->
    <div id="app"></div>
  </body>

  <script type="text/babel">
    class Count extends React.Component {
      //构造器
      constructor(props) {
        console.log("Count---constructor");
        super(props);
        this.state = { num: 0 };
      }

      //从props得到一个派生的状态,若state的值在任何时候都取决于props
      static getDerivedStateFromProps(props, state) {
        console.log("Count---getDerivedStateFromProps", props, state);
        return null;
      }

      //在更新之前记录快照
      getSnapshotBeforeUpdate() {
        console.log("Count---getSnapshotBeforeUpdate");
        return "atguigu";
      }

      sum = () => {
        this.setState({ num: this.state.num + 1 });
      };
      death = () => {
        //卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById("app"));
      };
      update = () => {
        this.forceUpdate();
      };

      /* 生命周期钩子 */

      //组件挂载完毕的时候
      componentDidMount() {
        console.log("Count---componentDidMount");
      }

      //组件将要卸载
      componentWillUnmount() {
        console.log("Count---componentWillUnmount");
      }

      //是否更新组件
      shouldComponentUpdate() {
        console.log("Count---shouldComponentUpdate");
        return true;
      }

      //组件更新完毕,之前的状态和快照值
      componentDidUpdate(preProps, preState, snapshotValue) {
        console.log(
          "Count---componentDidUpdate",
          preProps,
          preState,
          snapshotValue
        );
      }

      render() {
        console.log("Count---render");
        return (
          <div>
            <h1>当前求和为：{this.state.num}</h1>
            <button onClick={this.sum}>点我加1</button>
            <button onClick={this.death}>G</button>
            <button onClick={this.update}>强制更新</button>
          </div>
        );
      }
    }

    ReactDOM.render(<Count num={100} />, document.getElementById("app"));
  </script>
</html>
